import {defineStore} from "pinia";

type State = {
    visible: boolean,
    status: 'success' | 'warning' | 'danger' | 'info',
    content: string,
    title: string,
    btn: string
    loading: boolean
}

const useModelStore = defineStore('model', {
    state: ():State => ({
        visible: false,
        status: 'warning',
        content: '',
        title: '',
        btn: '',
        loading: false
    }),
    actions: {
        getVisible() {
            return this.visible;
        },
        setVisible(val: boolean) {
            this.visible = val;
        },
        setStatus(val: State['status']) {
            this.status = val;
        },
        getStatus() {
            return this.status;
        },
        setContent(val: string) {
            this.content = val;
        },
        getContent() {
            return this.content;
        },
        setTitle(val: string) {
            this.title = val;
        },
        getTitle() {
            return this.title;
        },
        setBtn(val: string) {
          this.btn = val;
        },
        getBtn() {
          return this.btn;
        },
        getLoading() {
            return this.loading;
        },
        setLoading (val: boolean) {
            this.loading = val;
        }
    },

    getters: {
        modalIconStyle (state) {
            if (state.status === 'success') {
                return {
                    color: '#00B42A'
                }
            }
            if (state.status === 'warning') {
                return {
                    color: '#FF7D00'
                }
            }
            if (state.status === 'danger') {
                return {
                    color: '#F76560'
                }
            }
            if (state.status === 'info') {
                return {
                    color: '#165DFF'
                }
            }
        },

    }
})

export default useModelStore;